<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="common/head::head"></th:block>
    <style>
        .status .status-div {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #c1c1c1;
        }

        .status .status-run {
            background-color: #05ff2d;
        }

        .status .status-stop {
            background-color: #ff0000;
        }

        .nginx_tree {
            width: 20%;
        }

        .nginx_table {
            width: 78%;
            margin-left: 1%;
        }

    </style>
</head>

<body>
<div style="width: 100%;display: flex;">
    <div class="nginx_tree" id="tree"></div>
    <div class="nginx_table">
        <div class="layui-row">
            <button id="addNgx" class="layui-btn layui-btn-sm">新增nginx配置</button>
            <button onclick="reload();" class="layui-btn layui-btn-sm">刷新表格</button>
            <div class="status" style="float: right;">
                <div class="status-div"></div>
                <span>未运行</span>

                <div class="layui-btn-group">
                    <button id="config" class="layui-btn layui-btn-sm">nginx配置</button>
                    <button id="open" class="layui-btn layui-btn-sm layui-bg-blue" style="display: none">启动nginx
                    </button>
                    <button id="reload" class="layui-btn layui-btn-sm layui-bg-blue" style="display: none">重新加载nginx
                    </button>
                    <button id="close" class="layui-btn layui-btn-sm layui-bg-orange" style="display: none">停止nginx
                    </button>
                </div>
            </div>
        </div>
        <table class="layui-table" id="tab_ngx" lay-filter="tab_ngx" style="margin: 0;"></table>
    </div>
</div>
</body>
<script type="text/html" id="bar_ngx">
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-warm" lay-event="update">编辑</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
</script>

<script type="text/javascript">
    function loadSuccess() {
        getStatus();

        var col = [
            {field: 'name', title: '文件名', sort: true, event: 'rowClick'},
            {field: 'serverCount', title: '数量', width: "7%", sort: true, event: 'rowClick'},
            {field: 'server_name', title: '域名', sort: true, width: "25%", event: 'rowClick'},
            {field: 'location', title: '根location', sort: true, event: 'rowClick'},
            {field: 'listen', title: '监听端口', width: "10%", sort: true, event: 'rowClick'},
            {field: 'time', title: '最后修改时间', sort: true, event: 'rowClick'},
            {field: 'op', title: '操作', align: 'center', toolbar: '#bar_ngx', fixed: 'right'}
        ];
        tableRender({
            id: 'tab_ngx',
            elem: '#tab_ngx',
            cols: [col],
            data: []
        });

        layui.use(['tree'], function () {
            let tree = layui.tree;
            loadTree();

            function loadTree() {
                loadingAjax({
                    url: './tree.json',
                    success: function (ret) {
                        if (ret.msg) {
                            layer.msg(ret.msg);
                        }
                        if (200 === ret.code) {
                            let data = ret.data;
                            if (!data || data.length <= 0) {
                                return false;
                            }
                            //渲染
                            tree.render({
                                elem: '#tree',  //绑定元素
                                id: "ngxTree",
                                data: data,
                                click: function (obj) {
                                    //当前节点下是否有子节点
                                    if (obj.data.children) {
                                        reloadTable(obj.data.whitePath, obj.data.path);
                                    }
                                }
                            });
                            let item = data[0];
                            reloadTable(item.whitePath, item.path);
                        }
                    }
                });
            }

            //获取文件夹下的配置
            function reloadTable(whitePath, fileName) {
                table.reload('tab_ngx', {
                    url: './list_data.json',
                    where: { //设定异步数据接口的额外参数
                        whitePath: whitePath,
                        name: fileName
                    }
                });
            }

            // 表格工具条事件
            table.on('tool(tab_ngx)', function (obj) {
                var data = obj.data;
                var event = obj.event;

                if ('update' === event) {
                    if (data.isDirectory) {
                        return;
                    }
                    // 修改
                    updateNgx(data);
                } else if ('delete' === event) {
                    // 删除
                    deleteNgx(data);
                } else if ("rowClick" === event) {
                    //表格行点击
                    if (data.isDirectory) {
                        reloadTable(data.path, data.relativePath);
                    }
                }
            });
        });

        // 新增配置
        $('#addNgx').on('click', function () {
            var url = './system/nginx/item.html?type=add';
            tabChange({
                id: 'nginx_add',
                url: url,
                title: '新增配置',
            });
        });

        // 修改
        function updateNgx(data) {
            var url = './system/nginx/item.html?type=update&path=' + data.path + "&name=" + data.relativePath;
            tabChange({
                id: 'nginx_' + data.path,
                url: url,
                title: 'nginx设置(' + data.name + ')',
            });
        }

        // 删除
        function deleteNgx(data) {
            layer.confirm('确定删除配置 ' + data.name + '？', {
                title: '系统提示'
            }, function (index) {
                layer.close(index);
                loadingAjax({
                    url: './delete',
                    data: {
                        path: data.path,
                        name: data.name
                    },
                    success: function (data) {
                        layer.msg(data.msg);
                        if (200 === data.code) {
                            table.reload('tab_ngx');
                        }
                    }
                });
            });
        }

        //nginx配置
        $('#config').on('click', function () {
            loadingAjax({
                url: './config',
                success: function (ret) {
                    if (ret.code !== 200 || !ret.data) {
                        layer.msg(ret.msg);
                        return;
                    }

                    layer.prompt({
                        title: '输入新的服务名称',
                        formType: 0,
                        value: ret.data.name
                    }, function (val, index) {
                        loadingAjax({
                            url: './updateConf',
                            data: {
                                name: val
                            },
                            success: function (data) {
                                layer.msg(data.msg);
                                if (200 === data.code) {
                                    layer.close(index);
                                    getStatus();
                                }
                            }
                        });
                    });
                }
            });
        });

        //开启nginx
        $('#open').on('click', function () {
            loadingAjax({
                url: './open',
                success: function (ret) {
                    if (ret.msg) {
                        layer.msg(ret.msg);
                    }
                    getStatus();
                }
            });
        });

        //重新加载nginx
        $('#reload').on('click', function () {
            loadingAjax({
                url: './reload',
                success: function (ret) {
                    if (ret.msg) {
                        layer.msg(ret.msg);
                    }
                }
            });
        });

        //关闭nginx
        $('#close').on('click', function () {
            layer.confirm('确定停止nginx服务？', {
                title: '系统提示'
            }, function (index) {
                layer.close(index);
                loadingAjax({
                    url: './close',
                    success: function (ret) {
                        if (ret.msg) {
                            layer.msg(ret.msg);
                        }
                        getStatus();
                    }
                });
            });
        });

        //获取状态
        function getStatus() {
            loadingAjax({
                url: './status',
                success: function (ret) {
                    if (ret.code !== 200) {
                        layer.msg(ret.msg);
                        return;
                    }
                    var data = ret.data;
                    var status = $(".status");
                    if (data.status) {
                        $('#close').css("display", "inline");
                        $('#reload').css("display", "inline");
                        $('#open').css("display", "none");
                        status.find(".status-div").addClass('status-run').removeClass('status-stop');
                        status.find("span").text('运行中');
                    } else {
                        status.find(".status-div").removeClass('status-run').addClass('status-stop');
                        status.find("span").text('未运行');
                        $('#open').css("display", "inline");
                        $('#close').css("display", "none");
                        $('#reload').css("display", "none");
                    }
                }
            });
        }
    }

    function reload() {
        table.reload('tab_ngx');
    }
</script>

</html>
